{extend name="public/base"/}
{block name="body"}
<style>

.info-box .headimg img{

  font-size: 1.8rem;
  line-height: 1.8rem;
  width: 2.5rem;
  border-radius: 50%;
  height: 2.5rem;
  background: #fff;
  display: inline-block;
  vertical-align: middle;

}
.info-box {

    line-height: 30px;

}

</style>
<header class="mui-bar mui-bar-nav" style="z-index:7">
    <h1 class="mui-title">大转盘抽奖</h1>
</header>
<div class="mui-content " style="background: rgb(230, 45, 45);     padding-bottom: 50px;">
  <img src="__PUBLIC__/game/dzp/1.png" id="shan-img" style="display:none;">
	<img src="__PUBLIC__/game/dzp/2.png" id="sorry-img" style="display:none;">
	<div class="banner">
		<div class="turnplate" style="background-image:url(__PUBLIC__/game/dzp/turnplate-bg.png);background-size:100% 100%;">
			<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
			<img class="pointer" src="__PUBLIC__/game/dzp/turnplate-pointer.png">
		</div>
	</div>
  <div class="mui-card">
      <div class="mui-card-header ">
          <div class="mui-ellipsis mui-col-xs-8">说明</div>
      </div>
      <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
            <li class="mui-table-view-cell">
                <div class="mui-table" style="font-size:12px;">
                    <div class="mui-table-cell mui-col-xs-12">
                        {:config('cjsm')}<br>
                        你今天还有<span id="cjjh" style="color:red;">{$degree}</span>抽奖机会<br />
                        奖品说明：（积分会自动加入个人账户中，奖品需联系微信）<br />
                        一等奖：
                        {:getDzpinfo('ydjlx', 'ydjjp')}
                        <br />
                        二等奖：
                        {:getDzpinfo('edjlx', 'edjjp')}
                        <br />
                        三等奖：
                        {:getDzpinfo('sdjlx', 'sdjjp')}
                        <br />
                        四等奖：
                        {:getDzpinfo('sidjlx', 'sidjjp')}
                        <br />
                        五等奖：
                          {:getDzpinfo('wdjlx', 'wdjjp')}


                <button type="button" class="mui-btn mui-btn-primary sbt" onclick=window.location.href="{:url('index/game/history')}" style="width:100%;margin-top:20px;">查看获奖记录</button>

                    </div>
                </div>
            </li>
      </ul>
  </div>
    {include file="public/nav" /}
</div>
{/block}
{block name="script"}
<link href="__PUBLIC__/game/dzp/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="__PUBLIC__/game/dzp/awardRotate.js"></script>
<script type="text/javascript">
  var turnplate = {
    restaraunts: [], //大转盘奖品名称
    colors: [], //大转盘奖品区块对应背景颜色
    outsideRadius: 192, //大转盘外圆的半径
    textRadius: 155, //大转盘奖品位置距离圆心的距离
    insideRadius: 68, //大转盘内圆的半径
    startAngle: 0, //开始角度

    bRotate: false //false:停止;ture:旋转
  };

  $(document).ready(function() {
    //动态添加大转盘的奖品与奖品区域背景颜色
    turnplate.restaraunts = ["一等奖   {:getDzpinfo('ydjlx', 'ydjjp')}", "谢谢参与", "二等奖   {:getDzpinfo('edjlx', 'edjjp')}", "谢谢参与", "三等奖   {:getDzpinfo('sdjlx', 'sdjjp')}", "谢谢参与", "四等奖   {:getDzpinfo('sidjlx', 'sidjjp')}", "谢谢参与", "五等奖   {:getDzpinfo('wdjlx', 'wdjjp')}", "谢谢参与"];
    turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];


    var rotateTimeOut = function() {
      $('#wheelcanvas').rotate({
        angle: 0,
        animateTo: 2160,
        duration: 8000,
        callback: function() {
          alert('网络超时，请检查您的网络设置！');
        }
      });
    };

    //旋转转盘 item:奖品位置; txt：提示语;
    var rotateFn = function(item, txt) {
      var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
      if (angles < 270) {
        angles = 270 - angles;
      } else {
        angles = 360 - angles + 270;
      }
      $('#wheelcanvas').stopRotate();
      $('#wheelcanvas').rotate({
        angle: 0,
        animateTo: angles + 1800,
        duration: 8000,
        callback: function() {


          mui.alert(txt);
          turnplate.bRotate = !turnplate.bRotate;
          $('#cjjh').text(0)
        }
      });
    };
    mui('body').on('tap','a',function(){
          window.top.location.href=this.href;
      });
    $('.pointer').click(function() {

      //注册
      // $userm = "{$Think.session.user.name}";
      // if(!$userm){
      //   mui.alert('  <a href="{:url('user/info')}" class="mui-btn mui-btn-primary" style="width:100%;margin-top:20px;">请先注册会员！</a>');
      //   return;
      // }


      //是否关注公众号
      // var subscribe = '{$subscribe}';
      // if(subscribe != 1){
      //   $.get("{:url('index/getSubscribe')}", function(data){
      //     if(data.value == 0){
      //       mui.alert('<img src="/public/images/qrcode_for_wx.jpg" style="width:100%;"><p style=" text-align: left;"><b>无法识别二维码</b><br />1、打开微信，点击‘添加朋友’<br />2、点击公众号<br />3、搜索公众号：贵阳鲜果屋<br />4、点击‘关注’，完成</p>', '请长按扫二维码关注公众号');
      //       return ;
      //     }
      //   })
      //
      // }else{
      //
      //     }


        //判断抽奖次数
        if($('#cjjh').text()!=1){
          mui.alert('您今天的抽奖次数已经用完，请明天再来！');
          return;
        }


              if (turnplate.bRotate) return;
              turnplate.bRotate = !turnplate.bRotate;
              //获取随机数(奖品个数范围内) 5 100 6
              var item = rnd(1, turnplate.restaraunts.length);
              // var sjs = rnd(1, 111);
              //
              // var ydjsl = "{:config('ydjsl')}",edjsl = "{:config('edjsl')}",sdjsl = "{:config('sdjsl')}",sidjsl = "{:config('sidjsl')}",wdjsl = "{:config('wdjsl')}"
              //
              // console.log(parseInt(ydjsl)+parseInt(edjsl));
              // if(sjs<=ydjsl){
              //   item = 1
              // }else if (sjs>5&&sjs<=105) {
              //   item = 3
              // }else if (sjs>105&&sjs<=111) {
              //   item = 5
              // }

               $.getJSON("{:url('index/game/rnd')}", function(json, textStatus) {
                var item = 10;
                if(json==1){
                  item = 1;
                }else if (json==2) {
                  item = 3;
               }else if (json==3) {
                  item = 5;
              }else if (json==4) {
                   item = 7;
                }else if (json==5) {
                    item = 9;
                }
                rotateFn(item, turnplate.restaraunts[item - 1]);
               });




              // $.getJSON("{:url('index/game/addCoupon')}", {total: '50', price: '10'}, function(json, textStatus) {
              //
              // });

              //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]






    });
  });

  function rnd(n, m) {
    var random = Math.floor(Math.random() * (m - n + 1) + n);
    return random;

  }


  //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
  window.onload = function() {
    drawRouletteWheel();
  };

  function drawRouletteWheel() {
    var canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
      //根据奖品个数计算圆周角度
      var arc = Math.PI / (turnplate.restaraunts.length / 2);
      var ctx = canvas.getContext("2d");
      //在给定矩形内清空一个矩形
      ctx.clearRect(0, 0, 422, 422);
      //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
      ctx.strokeStyle = "#FFBE04";
      //font 属性设置或返回画布上文本内容的当前字体属性
      ctx.font = '16px Microsoft YaHei';
      for (var i = 0; i < turnplate.restaraunts.length; i++) {
        var angle = turnplate.startAngle + i * arc;
        ctx.fillStyle = turnplate.colors[i];
        ctx.beginPath();
        //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
        ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
        ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
        ctx.stroke();
        ctx.fill();
        //锁画布(为了保存之前的画布状态)
        ctx.save();

        //----绘制奖品开始----
        ctx.fillStyle = "#E5302F";
        var text = turnplate.restaraunts[i];
        var line_height = 17;
        //translate方法重新映射画布上的 (0,0) 位置
        ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);

        //rotate方法旋转当前的绘图
        ctx.rotate(angle + arc / 2 + Math.PI / 2);

        /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
        if (text.indexOf("M") > 0) { //流量包
          var texts = text.split("M");
          for (var j = 0; j < texts.length; j++) {
            ctx.font = j == 0 ? 'bold 20px Microsoft YaHei' : '16px Microsoft YaHei';
            if (j == 0) {
              ctx.fillText(texts[j] + "M", -ctx.measureText(texts[j] + "M").width / 2, j * line_height);
            } else {
              ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
            }
          }
        } else if (text.indexOf("M") == -1 && text.length > 6) { //奖品名称长度超过一定范围
          text = text.substring(0, 6) + "||" + text.substring(6);
          var texts = text.split("||");
          for (var j = 0; j < texts.length; j++) {
            ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
          }
        } else {
          //在画布上绘制填色的文本。文本的默认颜色是黑色
          //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
          ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
        }

        //添加对应图标
        if (text.indexOf("闪币") > 0) {
          var img = document.getElementById("shan-img");
          img.onload = function() {
            ctx.drawImage(img, -15, 10);
          };
          ctx.drawImage(img, -15, 10);
        } else if (text.indexOf("谢谢参与") >= 0) {
          var img = document.getElementById("sorry-img");
          img.onload = function() {
            ctx.drawImage(img, -15, 10);
          };
          ctx.drawImage(img, -15, 10);
        }
        //把当前画布返回（调整）到上一个save()状态之前
        ctx.restore();
        //----绘制奖品结束----
      }
    }
  }
</script>

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" charset="utf-8"></script>
<script>
    wx.config({$options|json_encode});
    wx.error(function(e){
      	console.log(e);
      });
    wx.ready(function(){
      wx.onMenuShareTimeline({
          title: "鲜果屋大转盘抽奖",
          link: "{$crurl}",
          imgUrl: "http://www.xgw0851.com/public/xsd/img/dzp.png",
      });
      wx.onMenuShareAppMessage({
          title: "鲜果屋大转盘抽奖",
          desc: '', // 分享描述
          link: "{$crurl}",
          imgUrl: "http://www.xgw0851.com/public/xsd/img/dzp.png",

      });
    });
</script>
{/block}
